﻿/* Font sizes and styles {{{ =============================================== */

/* OMG, this fails to work properly on MSIE7. You get really weird cursor
positioning problems with mixed content. Instead the strategy is now to keep
browser defaults and make sure that teletype text is output as <code> elements. 

html, table, code, pre { font-size: 100%; } */

td,
html,
.lines
{
  font-family: "Cambria", "Times New Roman", "Times", serif;
  /* MSIE has a awful default font for "serif", so leave in a specific Win/MSIE
   * option; Which applies to all MSIE font families. */
}

.ui-button-insert,
h1, h2, h3, h4, h5, h6
{
  font-family: "Corbel", "Helvetica Neue", "Arial", sans-serif;
}

.uid-screen,      /*` ui-d/screen */
.swd-msgblock,    /*` sw-d/msgblock */
.prd-codeblock,   /*` pr-d/codeblock */
code 
{
  font-family: "Consolas", monospace;
  font-size: 14px; 
  /* Corrected the size of Consolas on MSIE AND FF. Notably FF on X11/Xft
   * renders consolas really large. This pixel size also works for 
   * platforms without Consolas but with e.g. Courier New. 
   */
}

h1, h2, h3, h4, h5, h6
{
  font-size: 100%;
  font-weight: bold;
  font-style: normal; 
  margin: 0.67em 0; /* crossbrowser consistency */
  clear: both; 
}
h3 { font-size: 117%; }
h2 { font-size: 140%; }
h1 { font-size: 200%; }

.note_type,
.xopus-visualisation-label,
.uid-menucascade,
.uid-uicontrol,
.topic-title,
.dlhead, 
.dt      /*` topic/dt */
{
  font-weight: bold;
}

.term,    /*` topic/term */
.abstract /*` topic/abstract */
{
  font-style: italic;
}
/* }}} ========================================================== */
/* Margins and paddings {{{ ================================================ */

html 
{
  margin: 0;
  padding: 0;
}

body 
{
  margin: 0;
  padding: 0 1em 1em;
}



.topic-fig,    /*` topic/fig */
.lq,           /*` topic/lq */
.fn,           /*` topic/fn */
.note,         /*` topic/note */
.shortdesc,    /*` topic/shortdesc */
.stepsection,  /*` task/stepsection */
.stepxmp,      /*` task/stepxmp */
.abstract,     /*` topic/abstract */
.example,      /*` topic/example */
.body,         /*` topic/body */
.section,      /*` topic/section */
.topic-table,  /*` topic/table */
.simpletable,  /*` topic/simpletable */
.map-topicmeta,/*` map/topicmeta */
.reltable,     /*` map/reltable */
.p,            /*` topic/p */
p 
{
  /* 
   * Block element margins, 
   * use CSS's collapsing margins feature here; 
   * See the other rule block for stuff that needs a two-line margin. 
   */
  margin: 1em 0;
}

.related-links,  /*` topic/related-links */
.prolog          /*` topic/prolog */
{
  /*
   * Blocks that need more margin
   */
  margin: 2em 0;
}

.searchtitle, /*` topic/searchtitle */
.navtitle,    /*` topic/navtitle */
p table 
{ 
  margin: 0; 
}

.lq,                   /*` topic/lq */
.topicref .topicref,   /*` map/topicref */
.prolog,               /*` topic/prolog */
dd, 
blockquote, 
ol,
ul
{
  /*
   * Block element left indenting
   */
  padding-left: 2em;
  margin-left: 0;
}


.lines /*` topic/lines */
{
  padding-left: 1em;
}

.prd-codeblock, 
.stepxmp, /*` task/stepxmp */
.note,    /*` topic/note */
.example, /*` topic/example */
.uid-screen   /*` ui-d/screen */
{
  /* Background color fill padding */
  padding: 1em;
}

/*p .note { padding: 0; } */

th, td { padding: 2px; }

/* }}} ====================================================================== */
/* Text styles (alignment, display, ...) {{{ =============================== */

th,
.attr-image-align-left
{
  text-align: left 
}

.alt, 
.attr-image-align-center 
{
  text-align: center
}

.attr-image-align-right 
{
  text-align: right
}

.attr-placement-inline /* topic/image > @placement */
{
  /* Toggle block-ness on span's */
  display: inline-block;
}

.attr-placement-break /* topic/image > @placement */
{
  /* Toggle block-ness on span's */
  display: block;
}

.attr-scalefit-yes { width: 100% }

.stentry, 
.reltable th, 
.reltable td
{
  vertical-align: top;
}

/* 
 * Unstyle topic/ul descendants: 
 */
.sl,                /*` topic/sl */
.sli,               /*` topic/sli */
.messagepanel,      /*` hazard-d/messagepanel */
.typeofhazard,      /*` hazard-d/typeofhazard */
.hazardstatement,   /*` hazard-d/hazardstatement */
.howtoavoid,        /*` hazard-d/howtoavoid */
.consequence        /*` hazard-d/consequence */
{
  /* retain ul margins/paddings */
  display: block;
  list-style: none;
}

.linkpool, /*` topic/linkpool */
.linklist  /*` topic/linklist */
{
  list-style: none;
}

.uid-screen /*` ui-d/screen */
{
  border: solid 1px;
}

.attr-frame-all,
.attr-frame-topbot,
.attr-frame-top { border-top: solid 1px; }

.attr-frame-all,
.attr-frame-topbot,
.attr-frame-bottom { border-bottom: solid 1px; }

.attr-frame-all,
.attr-frame-sides { border-left: solid 1px; border-right: solid 1px; }

.note_type { text-transform: uppercase; }

/* }}} ===================================================================== */
/* Colours {{{ ========================================================== */
.dummy { color: #808080; }

.prd-codeblock, 
.stepxmp,    /*` task/stepxmp */  
.note, 
.example,
.uid-screen  /*` ui-d/screen */
{
  background-color: #EFEFEF; /* lighter than placeholder */
}


.keyword, /*` topic/keyword */
.ph,      /*` topic/ph */
.term,    /*` topic/term */ 
.uid-screen,   /*` ui-d/screen */
div           /* convenient for classes that set a border without a color. */
{
  border-color: #AAA; /* matches placeholder */
}

.ui-button-insert,
a
{
  color: #0010AD;
  cursor: pointer;
}

body 
{
  background-color: #FFF;
  color: #000;
}

.conref, 
.conref *, 
.incomplete-conref, 
.incomplete-conref *
{
  background-color: #FFFCDE;
}

.draft-comment,  
.draft-comment *
{
  background-color: yellow;
}

.required-cleanup,  
.required-cleanup *
{ 
  background-color: orange; 
}

/* }}} ================================================================== */
/* Xopus UI (e.g. add ons generated in our xsl) {{{ ===================== */
table.xopus-visualisation-image-container,
table.xopus-visualisation-image-container th, 
table.xopus-visualisation-image-container td
{
  border: none;
  padding: 0;
  margin: 0;
}

.xopus-visualisation-spec-deprecated
{
  border-bottom: dotted 1px #FAA; 
}

.xopus-visualisation-href
{
  font-style: italic;
}

.xopus-visualisation-blockquote
{
  /* Outdent the opening quote */
  text-indent: -1ex; 
}

.xopus-visualisation-frame
{
  margin: 4px 0; /* px because it relates to px border size */
}


.xopus-ditabase-heading 
{
  padding: 4px 0 0 0;
}

.xopus-ditabase-heading-text
{
  display: inline-block;
  background: #606;
  padding: 1px 3px;
  color: #FFF;
  font-weight: bold;
}

.ui-panel 
{
  margin: 1em 0 0 0; 
  font-size: 80%;
}

.ui-button-insert
{
  text-decoration: underline;
  font-weight: bold;
}

.ui-radiobutton-answer
{
  float: left;
}

.ui-checkbox-answer
{
  float: left;
}

/* }}} */
/* Xopus cursor positioning / canvas setup {{{ ============================ */

.xopus-xsl-root
{
  /* 
   * Special sauce to catch the mouse for cursor positioning; 
   *
   * Note that MSIE7 had problems hitting the end of a paragraph when this rule
   * used height 100% but no width. You need to make sure that the entire view
   * is covered with the canvas. 
   *
   * Using top/left/bottom/right instead of width and height properties is
   * easiest since that makes it possible to use paddings. 
   *
   * Without the background, MSIE (7) doesn't seem to catch any mouse events at
   * all. Use the background color, luke! There may be other methods to prevent
   * this, I don't know about them.
   */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  color: #000:
  background: #FFF; 
}

div, h1, h2, h3, h4, h5, h6, p, dd, dt, dl, ul, ol, li, pre, table, code
{ 
  /* Selectors: Really only applies to descendants of xopus-xsl-root */
  background: #FFF; 
}

body 
{
  /* Assuming this is xopus-xsl-root's layout parent */
  margin: 0; 
  padding: 0; 
  top: 0;
  bottom: 0;
}

.xopus-xsl-root > *,
.topic-topic,
.map-map
{
  /* 
   * Use the 1px top padding so that events aren't sent to the parent,
   * you need the bottom padding to prevent MSIE (7) from doing weird 
   * things to the last line in view. 
   *
   * And this is set on the children of xsl-topic-root! Well, sort of, 
   * since ditabase with the <dita> element doesn't really do anything
   * and the xsl at present keeps it that way. 
   *
   * Don't use it for anything else since it breaks collapsing margins.
   */
  padding: 1px 1em;
}

/* }}} ================================================================== */
